
<!--{include common_head}-->

<style>
body {
	text-align:center;
	margin:0px;
	
}
#Div_reservation {
	position:absolute;
	width:600px;
	height:auto;
	left:20px;
	top:80px;
	background:#f5fbee;
	
}
#Div_reservation #testForm table tbody tr td {
	font-family: "ＭＳ Ｐゴシック", "ＭＳ ゴシック", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS UI Gothic";
	font-size: 14px;
}

</style>
<div id="Div_reservation">
<form action="/preengage.php" method="post" id="testForm">
  <table cellspacing="0" cellpadding="5" border="0" width="600">
    <tbody>
    <tr>
      <td width="106" align="right"><label>予約開始時間：</label></td>
      <td width="113">
        <label for="textfield"></label>
        <input type="text" name="search_date" value="{$year}-{$month}-{$day}" size="20" onfocus="WdatePicker({lang:'jp', dateFmt:'yyyy-MM-dd', minDate:'${date("Y-m-d")}'})" class="Wdate"/>
		<input type="text" name="startHour" value="{$startHour}" size="2"/>
		時
		<input type="text" name="startMinute" value="{$startMinute}" size="2"/>
		分
      </td>
	  <td><font size="-1" color="red" id="timeError" style="display : none">お名前を入力してください</font></td>
    </tr>
    <tr>
      <td align="right"><label>予約店舗</label>&nbsp;：</td>
      <td>
        <select name="shopId" class="f-city">
          <option value="0">選択してください</option>
			${Utility::Option(Utility::OptionArray($shopList, 'id', 'shop_name'), $defaultShopId)}
		</select>
      </td>
      </tr>
    <tr>
      <td align="right"><label>予約コース</label>&nbsp;：</td>
      <td>
        <label for="select"></label>
        <select id="select" name="service_id">
          <option value="0">選択してください</option>
			${Utility::Option(Utility::OptionArray($serviceList, 'id', 'service_name'), $serviceId)}
        </select>
      </td>
      </tr>
    <tr>
      <td align="right"><label>スタッフ指名</label>&nbsp;：</td>
      <td>
        <select id="designationStuff" name="staff_id">
          <option value="0">選択してください</option>
			${Utility::Option(Utility::OptionArray($staffList, 'id', 'staff_personal_name'), $staffId)}
        </select>
      </td>
	  <td><font size="-1" color="red" id="staff_error" style="display : none">お名前を入力してください</font></td>
      </tr>
    <tr style="display : none">
      <td align="right"><label>設備</label>&nbsp;：</td>
      <td>
        <select id="designationStuff" name="device_id">
          <option value="0">選択してください</option>
			${Utility::Option(Utility::OptionArray($deviceList, 'id', 'device_name'), $deviceId)}
        </select>
      </td>
      </tr>
    <tr>
      <td align="right"><label>予約終了時間</label>&nbsp;：</td>
      <td>
        <input name="endHour" type="text" disabled="disabled" id="end_time" size="2" readonly="readonly"/>
        時
        <input name="endMinute" type="text" disabled="disabled" id="end_time" size="2" readonly="readonly"/>
        分
      </td>
      </tr>
    <tr>
      <td align="right">&nbsp;</td>
      <td><input type="submit" value="確認する"/></td>
      </tr>
    <tr>
      <td align="right">&nbsp;</td>
      <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
 </form>
</div>

<!-- End Save for Web Slices -->
<script type="text/javascript">
var serviceCache = [];
var timeError = false;
var staffError = false;
$(document).ready(function(){
	$("#testForm").bind("submit", function(){
		if(staffError == true){
			$("#staff_error").html("ご指名スタッフはこの時間で予約取れませんの為に、ご予約できませんでした。").show();
			return false;
		}else{
			$("#staff_error").html("").hide();
		}
		return !timeError
		
	})
	
	$("input[name='search_date']").bind("blur", function(){
		calTime();
		getStaffs();
	})
	$("input[name='startHour']").bind("blur", function(){
		calTime();
		getStaffs();
	})
	$("input[name='startMinute']").bind("blur", function(){
		calTime();
		getStaffs();
	})
	
	$("select[name='shopId']").bind("change", function(){
		if( $(this).val() < 1 ){
			return ;
		}
		$.get("{$webRoot}/ajax/GetServiceList.php", "shopId=" + $(this).val(), function(data){
			var options = '<option value="0">選択してください</option>';
			for(var index in data.data){
				if( !index ){
					continue;
				}
				options = options + '<option value="' + index + '">' + data.data[index].service_name + '</option>';
				serviceCache[index] = data.data;
			}
			$("select[name='service_id']").html(options);
		}, "json");
		
	});


	$("select[name='service_id']").bind("change", function(){
		calTime();
		getStaffs();
		
	});
});

function getStaffs(){
	if( $("select[name='shopId']").val() < 1 || $("input[name='startHour']") < 1 || $("select[name='service_id']").val() < 1){
		return ;
	}
	var data = "shopId=" + $("select[name='shopId']").val() + "&serviceId=" +$("select[name='service_id']").val();
	data = data + "&start_date=" + $("input[name='search_date']").val() + " "+$("input[name='startHour']").val()+":"+$("input[name='startMinute']").val();
	
	$.get("{$webRoot}/ajax/GetStaffList.php", data, function(data){
		if( data.error != 0 ){
			$("select[name='staff_id']").html('<option value="0">選択してください</option>');
			staffError = true;
			return ;
		}
		staffError = false;
		$("#staff_error").hide();
		var options = '<option value="0">選択してください</option>';
		for(var index in data.data){
			if( !index ){
				continue;
			}
			options = options + '<option value="' + index + '">' + data.data[index] + '</option>';
			serviceCache[index] = data.data;
		}
		$("select[name='staff_id']").html(options);
	}, "json");
}

function calTime(){
	if( ($("input[name='startHour']").val() < 1 ) || $("select[name='service_id']").val() < 1 ){
		return ;
	}
	$("input[name='startMinute']").val() < 1 ? $("input[name='startMinute']").val(0) : $("input[name='startMinute']").val();
	var data = "shopId=" + $("select[name='shopId']").val() + "&serviceId=" +$("select[name='service_id']").val();
	data = data + "&start_date=" + $("input[name='search_date']").val() + " "+$("input[name='startHour']").val()+":"+$("input[name='startMinute']").val();
	$.get("{$webRoot}/ajax/CalcEndTime.php", data, function(data){
		if( data.error == 0 ){
			$("#timeError").hide();
			timeError = false;
			for(var index in data.data){
				$("input[name='endHour']").val(data.data['endHour']);
				$("input[name='endMinute']").val(data.data['endMinute']);
			}
		}else{
			$("#timeError").html(data.data).show();
			timeError = true;
		}
		
	}, "json");
}

</script>
</body>
</html>